﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>公告</title>
	<link rel="stylesheet" href="/css/common2.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/animate.css/4.1.1/animate.min.css" />
	<style>
		td img {
			max-width: 50px;
		}

		.look-btn {
			border: none;
			cursor: pointer;
			width: 100px;
			height: 30px;
			background-color: #409eff;
			color: white;
			letter-spacing: 5px;
			border-radius: 5px;
			margin: 0 10px;
		}


		.notice-btn {
			border: none;
			cursor: pointer;
			width: 100px;
			height: 30px;
			background-color: #409eff;
			color: white;
			letter-spacing: 5px;
			border-radius: 5px;
			float: right;
		}

		.notice-btn:hover {
			background-color: #66b1ff;
		}

		.look-btn:hover {
			background-color: #66b1ff;
		}

		.pop-up {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(41, 41, 41, 0.774);
		}

		.pop-html {
			background-color: white;
			color: black;
			width: 100%;
			height: 100%;
			padding-top: 100px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
		}

		.pop-html img {
			max-width: 98%;
		}

		.pop_pic {
			max-width: 100%;
			max-height: 100%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
		}

		.scorll {
			overflow: auto;
		}

		.scorll::-webkit-scrollbar {
			width: 7px;
			height: 7px;
		}

		.scorll::-webkit-scrollbar-track {
			border-radius: 7px;
		}

		.scorll::-webkit-scrollbar-thumb {
			border-radius: 7px;
			background: rgba(120, 121, 122, 0.603);
		}

		.notice-do {
			position: sticky;
			top: 0;
			padding: 5px 0;
			background-color: white;
			z-index: 100;
			height: 30px;
			width: 100%;
		}
	</style>
</head>

<body class="main-body">
	<div id="vue-root" style="margin-top: 20px;">

		<div class="add" v-if="isAdmin">
			<a href="history_item.html" style="color: white">添加公告</a>
		</div>

		<br>
		<div class="table">
			<table class="table_top">
				<thead>
					<tr>
						<th>
							<input type="checkbox" class="check-box" v-model="all">
						</th>
						<th>序号</th>
						<th>创建时间</th>
						<th>标题</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(history,index) in list" :key="history.id">
						<td>
							<input type="checkbox" class="check-box" v-model="history.checked">
						</td>
						<td><span v-text="index+1"></span></td>
						<td v-text="history.time"></td>
						<td>
							<div style="max-height:50px; max-width: 200px; overflow: hidden; margin: 0 auto;"
								title="推荐看详情" v-text="history.title"></div>
						</td>
						<td>
							<div style="display: flex;justify-content: center;align-items: center;">
								<div class="edit-icon option-icon" v-if="isAdmin">
									<a :href="'history_item.html?id='+history.id">
										<img class="img" src="/image/edit.png" height="20" width="20"
											onmouseover="this.src='/image/edit_light.png'"
											onmouseout="this.src='/image/edit.png'" />
									</a>
								</div>
								<button class="look-btn" @click="lookMsg(history.html,true)">查看</button>
								<div class="delete-icon option-icon" @click="del([history.id])" v-if="isAdmin">
									<img class="img" src="/image/delete.png" height="20" width="20"
										onmouseover="this.src='/image/delete_light.png'"
										onmouseout="this.src='/image/delete.png'" />
								</div>
							</div>
						</td>
					</tr>
					<tr v-if="list.length == 0">
						<td colspan="5">暂无公告</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class="delete" @click="batchDelete" v-if="isAdmin">批量删除</div>
		<div class="pop-up animate__animated animate__fadeInDownBig" v-if="pop_show">

			<div class="notice-do">
				<button @click="lookMsg('',false)" class="notice-btn">确定</button>
			</div>

			<div class="pop-html scorll" v-html="pop_html" @click.stop="pop_pic_change"></div>
		</div>
		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
		</ul>

		<div v-if="pop_img" class="pop-up" @click="pop_img=false">
			<img class="pop_pic" :src="pop_pic" alt="">
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>

	<script>
		var app = new Vue(merge({
			data: {
				urls: {
					del: '/pc/history/del',
					list: '/pc/history/list'
				},
				isAdmin: !/school/.test(top.location.href),
				pop_show: false,
				pop_html: '',
				search: {
					schoolId: top_params().id
				},
				pop_img: false,
				pop_pic: ''
			},
			methods: {
				lookMsg: function (html, states) {
					this.pop_html = html;
					this.pop_show = states
				},
				pop_pic_change: function (e) {
					if (!e.target.src) return;
					this.pop_pic = e.target.src;
					this.pop_img = true
				}
			},
		}));
	</script>

</body>

</html>